// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Panel styles


// The panel covers the entire screen.
.ms-Panel {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: @ms-zIndex-Panel;

  // Overlay used within panel
  .ms-Overlay {
    z-index: @ms-zIndex-back;
  }
}

// The panel itself, where the content goes.
.ms-Panel-main {
  background-color: @ms-color-white;
  bottom: 0;
  position: fixed;
  right: 0;
  top: 0;
  display: none; //prevent the panel from briefly showing up when the page loads
  z-index: @ms-zIndex-front;
}

// Scrollable content area, below the command buttons.
.ms-Panel-contentInner {
  position: absolute;
  top: 40px; // Push it below the commands.
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 32px 20px 32px;
  overflow-y: auto;
}

// Header text at the top of the panel.
.ms-Panel-headerText {
  font-family: @ms-font-family-light;
  font-size: @ms-font-size-xl;
  color: @ms-color-neutralPrimary;
  line-height: 82px; // Magic number that places text baseline at 50px.
  height: 70px;
}


// Small screens.
@media (min-width: @ms-screen-sm-min) {

  .ms-Panel {
    display: none;
  }

  .ms-Panel.is-open {
    display: block;
  }

  // Always hide overlay on small screens.
  .ms-Panel .ms-Overlay {
    display: none;
  }

  .ms-Panel.is-open .ms-Panel-main {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
  }

}

// Medium screens.
@media (min-width: @ms-screen-md-min) {

  .ms-Panel {
    display: block;
    pointer-events: none;
  }

  // When opened, the full-width panel is replaced with one that is 340px wide
  // and attached to the right of the screen.
  .ms-Panel-main {
    border-left: 1px solid @ms-color-neutralLight;
    border-right: 1px solid @ms-color-neutralLight;
    right: -40px;
    pointer-events: auto;
    width: 341px; // Add a pixel due to border-box.
    .ms-u-slideRightOut40;
  }

  .ms-Panel.is-open .ms-Panel-main {
    .drop-shadow(-30px, 0px, 30px, -30px, .2);
    left: auto;
    .ms-u-slideLeftIn40;
  }

  // On medium screens and up, the small panel attached to the left is a variant.
  .ms-Panel.ms-Panel--small.ms-Panel--left.is-open .ms-Panel-main {
    .drop-shadow(30px, 0px, 30px, -30px, .2);
    .ms-u-slideRightIn40;
  }

  .ms-Panel.ms-Panel--small.ms-Panel--left .ms-Panel-main {
    left: 0;
    right: auto;
    .ms-u-slideLeftOut40;
  }

  // Display the overlay, but with 0 opacity so that we can animate it.
  .ms-Panel .ms-Overlay {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity @ms-duration3 @ms-ease1;
  }

  // When the panel is opened, animate to full opacity
  // and activate pointer events so can be clicked.
  .ms-Panel.is-open .ms-Overlay {
    cursor: pointer;
    opacity: 1;
    pointer-events: auto;
  }
}

// Large screens.
@media (min-width: @ms-screen-lg-min) {

  // All but the small panel (medium to extra large) become
  // fluid with a fixed left margin of 48px when opened.
  .ms-Panel.ms-Panel--medium,
  .ms-Panel.ms-Panel--large,
  .ms-Panel.ms-Panel--extraLarge {
    .ms-Panel-main {
      left: 47px; // Remove a pixel due to border-box.
      width: auto;
    }
  }

  .ms-Panel.ms-Panel--medium.is-open,
  .ms-Panel.ms-Panel--large.is-open,
  .ms-Panel.ms-Panel--extraLarge.is-open {
    .ms-Panel-main {
      width: auto;
    }
  }

}

// Extra large screens.
@media (min-width: @ms-screen-xl-min) {

  // Medium panel changes to 643px fixed width, while all other
  // sizes remain the same as they were on large screens.
  .ms-Panel.ms-Panel--medium .ms-Panel-main {
    left: auto;
    width: 644px; // Add a pixel due to border-box.
  }

  .ms-Panel.ms-Panel--medium.is-open .ms-Panel-main {
    left: auto;
    right: 0;
    width: 644px; // Add a pixel due to border-box.
  }

}

// Extra extra large screens.
@media (min-width: @ms-screen-xxl-min) {

  // Large panels have an increased left margin of 428px.
  .ms-Panel.ms-Panel--large .ms-Panel-main {
    left: 427px; // Remove a pixel due to border-box.
  }

  // Extra large panels have an increased left margin of 176px.
  .ms-Panel.ms-Panel--extraLarge .ms-Panel-main {
    left: 175px; // Remove a pixel due to border-box.
  }

  // For now, the small left panel is hidden on XXL screens and up.
  .ms-Panel.ms-Panel--small.ms-Panel--left {
    display: none;
  }
}
